<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>注册页面</title>
  <!--    引入格式文件-->
  <link rel="stylesheet" href="./css/reg.css" />
  <script src="./jquery.js"></script>
  <script src="./axios.js"></script>
</head>

<body>
  <style></style>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <form action="#" method="post">
          <table>
            <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                <input type="text" id="username" name="username" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class="td_right">
                <input type="password" id="password" name="password" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="phone">手机号</label></td>
              <td class="td_right">
                <input type="text" id="phone" name="phone" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">性别</label></td>
              <td class="td_right">
                <label><input type="radio" name="sex" value="1" checked />男</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" name="sex" value="0" />女</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">是否VIP</label></td>
              <td class="td_right">
                <label><input type="radio" name="vip" value="1" />是</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" name="vip" value="0" checked />否</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="question">密保问题</label></td>
              <td class="td_right">
                <input type="text" id="question" name="question" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="answer">密保答案</label></td>
              <td class="td_right">
                <input type="text" id="answer" name="answer" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="avatar">头像</label></td>
              <td class="td_right">
                <input type="text" id="avatar" disabled />
                <button id="tp">选择图片</button><input type="file" hidden />
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <input type="submit" value="立即注册" id="btn_sub" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="rg_right">
      <p>已有账号？<a href="">立即登录</a></p>
    </div>
  </div>
</body>
<script>
  //设置默认请求根路径
  axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
  //  1. 点击按钮，弹出文件选择框
  document.querySelector('#btnChoose').addEventListener('click', function () {
    document.querySelector('#iptFile').click(function () {

    })
  })
  //  2. 实现文件的上传功能
  document.querySelector('#iptFile').addEventListener('change', async function () {
    const file = this.files[0]
    console.log("file", file)
    if (!file) {
      return
    }
    const fd = new FormData()
    fd.append('avatar', file)
    const res = await axios.post('/api/file', fd)
  })


  //获取表单并注册submit事件
  document.querySelector('form').addEventListener('submit', async function (e) {

    //阻止默认行为
    e.preventDefault()
    //发生请求
    const res = await axios({
      url: '/user/reg',
      method: 'post',
      data: {
        //携带获取的参数
        username: document.querySelector('#username').value,
        password: document.querySelector('#password').value,
        phone: document.querySelector('#phone').value,
        sex: +document.querySelector('[name=sex]').value,
        vip: +document.querySelector('[name=vip]').value,
        question: document.querySelector('#question').value,
        answer: document.querySelector('#answer').value

      }
    })
    console.log(res);
    if (res.success === false) {
      return alert(res.msg)
    }
    alert(res.msg)
    location.href = '../01-loginBaseCode/login.html'
  })


</script>

</html>